<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

// const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    // 条形图单条宽度
    barWidth: {
      type: Number,
      default: 30
    },
    // 条形图方向
    direction: {
      type: String,
      default: 'vertical'
    },
    // 图例组件离容器左侧距离
    legendLeft: {
      type: String,
      default: 'center'
    },
    legendTop: {
      type: String,
      default: 'top'
    },
    // 柱状图类型名称
    legendDataList: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 轴下的类别
    axisTableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    dataObj: {
      type: Object,
      default: function() {
        return {}
      }
    },
    color: {
      type: String,
      default: '#333'
    },
    yAxisShow: {
      type: Boolean,
      default: true
    },
    legendColor: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    dataObj() {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: '#fff',
          padding: [5, 15],
          textStyle: {
            color: '#666666'
          }
        },
        legend: {
          data: this.legendDataList,
          left: this.legendLeft,
          top: this.legendTop,
          textStyle: {
            color: this.color
          },
          itemWidth: 8,
          itemHeight: 8
        },
        grid: {
          // top: 10,
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        color: this.legendColor,
        xAxis: [{
          type: this.direction === 'vertical' ? 'category' : 'value',
          data: this.direction === 'vertical' ? this.axisTableData : [],
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#3A3A3E'
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255, .5)',
            fontSize: 16
          }
        }],
        yAxis: [{
          type: this.direction === 'vertical' ? 'value' : 'category',
          data: this.direction === 'vertical' ? [] : this.axisTableData,
          show: this.yAxisShow
        }],
        series: []
      }
      Object.keys(this.dataObj).forEach(item => {
        options.series.push({
          name: item,
          type: 'bar',
          stack: 'total',
          barWidth: this.barWidth,
          label: {
            show: true
          },
          data: this.dataObj[item]
        })
      })
      this.chart.setOption(options)
    }
  }
}
</script>
